<template>
  <view class="login-container">
    <CustomNavBar title="返回"  backIconColor="#000000" :placeholder="false" backgroundColor="transparent" />

    <!-- Logo区域 -->
    <view class="logo-section">
      <image class="logo" src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/activity_pile/logo@2x.png" mode="aspectFit"></image>
    </view>

    <!-- 登录按钮区域 -->
    <view class="login-section">
      <button 
        class="login-btn" 
        :class="{ 'disabled': !isAgreed }"
        :disabled="!isAgreed"
        type="default" 
        open-type="getPhoneNumber" 
        @getphonenumber="decryptPhoneNumber"
      >
        手机号一键登录
      </button>
    </view>

    <!-- 协议勾选区域 -->
    <view class="agreement-section">
      <view class="agreement-checkbox" @click="toggleAgreement">
        <view class="checkbox" :class="{ 'checked': isAgreed }">
          <text class="checkmark" v-if="isAgreed">✓</text>
        </view>
        <text class="agreement-text">
          我已阅读并同意
          <text class="link" @click.stop="openAgreement('user')">《听鸽停车充电用户使用协议》</text>
          和
          <text class="link" @click.stop="openAgreement('privacy')">《听鸽停车充电隐私政策》</text>
          ，未注册的手机号在登录后将自动为您创建账号。
        </text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import AuthApi from '../../api/auth.js'
import LoginUtils from '@/utils/loginUtils.js'
import CustomNavBar from '@/components/CustomNavBar.vue';

// 响应式数据
const isAgreed = ref(false)

// 页面加载
onLoad(() => {
  uni.hideTabBar()
})

// 切换协议同意状态
const toggleAgreement = () => {
  isAgreed.value = !isAgreed.value
}

// 打开协议页面
const openAgreement = (type) => {
  if (type === 'user') {
    uni.navigateTo({
      url: '/pages/activity/agreement'
    })
  } else if (type === 'privacy') {
    uni.navigateTo({
      url: '/pages/activity/agreement?type=privacy'
    })
  }
}

// 微信手机号授权回调
const decryptPhoneNumber = async (e) => {
  console.log('获取手机号:', e)
  
  if (e.detail.errMsg === 'getPhoneNumber:ok') {
    // 获取手机号成功
    const detail = e.detail
    let channel = LoginUtils.getChannel();
    let code = channel === 1 ? detail.code : detail.encryptedData;
    try {
      // 调用后端API注册/登录
      const result = await AuthApi.otherRegisterPhone(code , detail.sign, channel)
      console.log(result)
      if (result === 1){
        LoginUtils.logout()
        return false;
      }

      // 登录成功，保存用户信息
      uni.setStorageSync('registerStatus', 0) // 设置为已登录状态

      uni.showToast({
        title: '登录成功',
        icon: 'success'
      })

      // 延迟跳转回上一页或首页
      setTimeout(() => {
        uni.navigateBack()
      }, 1000)
    } catch (error) {
      console.error('登录接口调用失败:', error)
      uni.showToast({
        title: '网络错误，请重试',
        icon: 'none'
      })
    }
    
  } else {
    // 获取手机号失败
    uni.showToast({
      title: '获取手机号失败',
      icon: 'none'
    })
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 40rpx;
  box-sizing: border-box;
  background-color: #ffffff;
}

.logo-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 200rpx;
}

.logo {
  width: 500rpx;
  height: 500rpx;
  margin-bottom: 40rpx;
}

.app-name {
  font-size: 48rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 16rpx;
  letter-spacing: 4rpx;
}

.app-subtitle {
  font-size: 28rpx;
  color: rgba(51, 51, 51, 0.6);
  letter-spacing: 2rpx;
}

.login-section {
  width: 100%;
  margin-bottom: 60rpx;
}

.login-btn {
  width: 100%;
  height: 96rpx;
  background: #1CCCB4;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 48rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(28, 204, 180, 0.3);
  transition: all 0.3s ease;
}

.login-btn.disabled {
  background: #cccccc;
  color: #999999;
  box-shadow: none;
}

.login-btn:not(.disabled):active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 12rpx rgba(28, 204, 180, 0.3);
}

.agreement-section {
  width: 100%;
  margin-bottom: 80rpx;
}

.agreement-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
}

.checkbox {
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid rgba(51, 51, 51, 0.3);
  border-radius: 6rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4rpx;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.checkbox.checked {
  background: #1CCCB4;
  border-color: #1CCCB4;
}

.checkmark {
  color: #ffffff;
  font-size: 20rpx;
  font-weight: bold;
}

.agreement-text {
  font-size: 24rpx;
  color: rgba(51, 51, 51, 0.6);
  line-height: 1.6;
  flex: 1;
}

.link {
  color: #1CCCB4;
  text-decoration: underline;
}
</style>